<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>测试 - layui</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .mybox { width:600px}
        .myh1{margin:50px 0;text-align: center;}
    </style>
</head>
<body>
<form class="layui-form">
    <div class="layui-container">
        <h1 class="myh1">作业未完成记录</h1>
        <!--   下拉列表 begin     -->
        <div class="layui-row">
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">班级</label>
                    <div class="layui-input-block">
                        <select id="ban" name="interest" lay-filter="ban">
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">学生</label>
                    <div class="layui-input-block">
                        <select  id="xue" name="interest" lay-filter="xue">
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <!--    end    -->
        <div class="layui-form-item">
            <label class="layui-form-label">日期选择</label>
            <div class="layui-input-block">
                <input id="rq" type="date" placeholder="请输入"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">原因</label>
            <div class="layui-input-block">
                <input id="yy" type="text" name="" placeholder="请输入"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <button onclick="addinfo()" type="button" class="layui-btn">记录</button>
            <a id="mya" onclick="cha()" href="#" class="layui-btn" target="_blank">查看本月情况</a>
        </div>
    </div>
</form>
</body>
<script src="js/jquery.min.js"></script>
<script>
    // jq onload()事件
    $(function () {
        var url="reflect/ban";
        $.get(url).done(function (data) {
            console.log(data);
            //增加到班级列表里
            $("#ban").append("<option>请选择一个班</option>");
            for(var i=0;i<data.length;i++){
                var op = new Option(data[i].className,data[i].classId);
                $("#ban").append(op);
            }
            renderForm();//表单重新渲染
        });
    });
    function getstu() {
        var classId = $("#ban").val();
        var url ="reflect/xue?cid="+classId;
        $.get(url).done(function (data) {
            console.log(data);
            $("#xue").empty();
            for(var i=0;i<data.length;i++){
                var op = new Option(data[i].userName,data[i].studentId);
                $("#xue").append(op);
            }
            renderForm();//表单重新渲染
        });
    }
    //增加作业信息
    function  addinfo() {
        var sid = $("#xue").val();
        alert(sid);
        var ctime = $("#rq").val();
        var remark = $("#yy").val();
        //
        console.log(sid+"--"+ctime+"--"+remark);
        var data= {
            sid: sid,
            ctime:ctime,
            remark: remark
        };
        $.post("reflect/add",data).done(function (data) {

            console.log(data);
            if(data.code ==1){
                layer.msg("成功记录");
            }else{
                layer.msg("记录失败");
            }
        });
    }
    function cha() {
        var banid = $("#ban").val();
        var riqi = $("#rq").val();
        $("#mya").attr("href","reflect/search?cid="+banid+"&riqi="+riqi);
    }
    function renderForm(){
        layui.use('form', function(){
            var form = layui.form
            form.render();
        });
    }
</script>
<script src="layui/layui.js"></script>
<script>
    layui.use(['layer', 'form'],function() {
        var layer = layui.layer
            , form = layui.form
            , laypage = layui.laypage
            , element = layui.element
            , laydate = layui.laydate
            , util = layui.util;
        form.on('select(ban)', function (data) {
            getstu();
        });
    });
</script>
</html>